<script setup>
/** 本页面按照功能划分功能和函数;*/
import {ref} from "vue";
import StandardCom from "./standardCom.vue";
import QualityCom from "./qualityCom.vue";
const required = (value, name) => !!value || `${name}为必填字段`;
/** 顶部切换素质教育/标化成绩tabs功能开始*/
const headerTabs = ref(0)
const handleHeaderTabs = (index) => {
  headerTabs.value = index
//   todo tabs切换数据
}
/** 顶部切换素质教育/标化成绩tabs功能结束*/

</script>

<template>
  <div class="content">
    <!--    顶部标题和tabs-->
    <div class="header-box">
      <div class="title">学生列表</div>
      <div class="tabs ">
        <div @click="handleHeaderTabs(0)" :class="{item: true, active: headerTabs === 0}">
          <i  class="ri-article-line"></i>
          标准成绩
        </div>
        <div @click="handleHeaderTabs(1)" :class="{item: true, active: headerTabs === 1}">
          <i class="ri-run-line"></i>
          素质教育
        </div>
      </div>
    </div>
    <VDivider/>
    <div class="main-bottom">
      <standard-com v-if="headerTabs==0"></standard-com>
      <quality-com v-if="headerTabs==1"></quality-com>
    </div>
  </div>
</template>

<style  lang="scss">
.box-shadow{
  border-radius:  6px;
  box-shadow: 0px 4px 10px 0px rgba(46, 38, 61, 0.2);
  padding: 24px;
}
.header-box{
  background-color:rgb(var(--v-theme-surface));
  display: flex;
  align-items: center;
  height: 62px;
  padding: 12px 0 12px 24px;
  border-radius: 8px 8px 0 0;
  .title{
    font-family: PingFang SC;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

  }
  .tabs{
    margin-left: 30px;
    display: flex;
    align-items: center;
    .active{

      background-color:rgba(140, 87, 255, 0.16);
      border-radius: 6px;
      color: rgba(140, 87, 255, 1);
    }
    .item{
      padding: 22px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      font-size: 16px;
      align-items: center;
      width: 128px;
      height:38px;
      margin-right: 4px;
      cursor: pointer;
      >i{
        font-size: 18px;
        margin-right: 4px;
      }
    }
  }
}
.main-bottom{
  background-color: rgb(var(--v-theme-surface));
  padding:32px 24px 30px;
  .right-summary{
    display: flex;
    align-items: center;
    font-family: Inter;
    font-size: 24px;
    font-weight: 500;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    .icon-box{
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color:rgba(240, 239, 240, 1);
      border-radius: 6px;
      margin-right: 10px;
    }
  }
  .search-box{
    background-color: rgb(var(--v-theme-surface));
  }
  .text-display{
    display:flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    .text-display-item{
      margin-top:10px;
      width: 32%;
      display:flex;
      justify-content: space-between;
      box-shadow: 0px 4px 10px 0px rgba(46, 38, 61, 0.2);
      padding: 20px;
      border-radius: 6px;
      .icon-box{
        width: 42px;
        height: 42px;
        padding: 8px;
        border-radius: 6px;
        background: rgba(218, 243, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(22, 177, 255, 1);
      }
      .title{
        font-family: PingFang SC;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        margin-bottom:10px;
      }

    }
  }
  .class-bar-box{
    box-shadow: 0px 4px 10px 0px rgba(46, 38, 61, 0.2);
    padding: 20px;
    border-radius: 6px;


  }
  .radar-box{
    width: 48%;
    height: 500px;
  }
}
.chart-line{
  height: 30px;
  .title{
    font-family: PingFang SC;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-right:15px;
  }
  .tip{
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: rgba(46, 38, 61, 0.55);
  }
  .tip-item{
    display: flex;
    align-items: center;
    margin-left: 30px;
    .color-box{
      width: 16px;
      height: 16px;
      border-radius: 1px;
      margin-right: 8px;
    }
  }
}
</style>
